<template>
    <div>
        <el-dialog :title="form.id?'修改职员':'添加职员'" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
            center>
            <el-form ref="form" :model="form" label-width="80px" class="form" :rules="rules">
                <div class="left">
                    <el-form-item label="照片" prop="photo">
                        <el-upload v-model="form.photo" class="avatar-uploader"
                            action="http://estate.eshareedu.cn/estate/api/upload/add" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :headers="{Authorization: token}"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" style="width:200px" @input="change($event)"></el-input>
                    </el-form-item>
                    <el-form-item label="管辖范围">
                        <el-cascader v-model="buildingids" :options="tablelist" placeholder="请选择" :props="propstag"
                            clearable style="width:200px" @change="buildingid"></el-cascader>
                    </el-form-item>
                    <el-form-item label="职员类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择" style="width:200px">
                            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id" @change="$forceUpdate()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别" v-model="form.sex">
                        <el-radio v-model="form.sex" :label="1" @input="change($event)">男</el-radio>
                        <el-radio v-model="form.sex" :label="0" @input="change($event)">女</el-radio>
                    </el-form-item>
                </div>
                <div class="right">
                    <el-form-item label="身份证号" prop="cardid">
                        <el-input v-model="form.cardid" style="width:200px" @input="change($event)"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话"  prop="mobile">
                        <el-input v-model="form.mobile" style="width:200px" @input="change($event)"> </el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu()">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { stafftype, builList, staffadd } from '@/api/staffs'
const token = sessionStorage.getItem("token")
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            buildingids: [],
            token: token,
            form: {
                photo: "",
                id: 0,
                pass: null,
                state: 0,
                type: 2,
                building: [],
                sex: "1",

            },
            searchInfo: "",
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false,
                checkStrictly: true,
                multiple: true
            },
            imageUrl: '',
            tablelist: [],
            type: [],
            imgage: "http://estate.eshareedu.cn/estate/upload/",
            rules: {
                photo: [
                    { required: true, message: '', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '', trigger: 'blur' }
                ],
                cardid: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '电话不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        // 职员类型
        this.getstafftype()
        // 楼栋列表
        this.GetBuillist()
    },
    // updated(){
    //     this.form = this.handleClickdata
    // },
    watch: {
        handleClickdata: {
            handler(val) {
                if (val) {
                    for (let i in val) {
                        this.form[i] = val[i]
                        if (i === 'building') {
                            this.buildingids = val[i].map(item => {
                                return item.buildingid
                            })
                        }
                        if (i === "photo") {
                            this.imageUrl = this.imgage + val[i]
                        }
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        // 职员类型
        async getstafftype() {
            let res = await stafftype()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 楼栋列表
        async GetBuillist() {
            let res = await builList()
            // console.log(res);
            if (res.errCode == 10000) {
                this.tablelist = res.data.list

            }
        },
        // 添加
        async add() {
            let res = await staffadd(this.form)

            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success',
                });
                this.form = {}
                this.imageUrl = ''
                this.buildingids = null
            }
            this.$emit('isclose', false, true, {})
        },
        buildingid(val) {
            const arr = val?.map(item => ({ buildingid: item }))
            this.form.building = arr
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit("isclose", false, false, {})
                    this.form = {}
                    this.imageUrl = ''
                    this.buildingids = null
                })
                .catch(_ => { });
        },
        qu() {
            this.$emit("isclose", false, false, {})
            this.form = {}
            this.imageUrl = ''
            this.buildingids = null
        },
        handleAvatarSuccess(res, file) {
            if (res.errCode == 10000) {
                this.form.photo = res.data
            }
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        change() {
            this.$forceUpdate()
        },
    }
}
</script>

<style lang="less" scoped>
.form {
    display: flex;
    padding: 0 20px;
    min-width: 300px;
    margin: auto;
}

.left {
    flex: 1
}

.right {
    flex: 1;
    margin: auto
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {

    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>